<template>
    <el-container direction="vertical">
      <el-row>
        <el-col :span="4">
          <el-input
            placeholder="请输入关键字"
            v-model="keywords" style="width: 100%"
            @keyup.native.enter="getMerchantList"
            clearable
            prefix-icon="el-icon-search"
          >
          </el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="primary" @click="getMerchantList" style="width: 100%">查询</el-button>
        </el-col>
      </el-row>
      <el-row >
        <el-table
          stripe
          :data="merchantList"
          :default-sort = "{prop: 'enterDate', order: 'descending'}"
          style="width: 100%;"
        >
          <el-table-column
            prop="id"
            label="店铺ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="merchantName"
            label="商家名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="bossName"
            label="经营人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="enterDate"
            sortable
            label="入驻时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="merchantType"
            label="商家类型"
            width="180">
          </el-table-column>
          <el-table-column
            label="状态"
            width="180">
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.state === 0">审核中</el-tag>
              <el-tag type="success" v-if="scope.row.state === 1">已入驻</el-tag>
            </template>
          </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-dropdown size="mini" split-button type="primary" @command="handleMerchant">
                  操作
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{id:scope.row.id,state:0}">等待审核</el-dropdown-item>
                    <el-dropdown-item :command="{id:scope.row.id,state:1}">同意入驻</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="reviseMerchant(scope.row)">
                </el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  @click="handleDelete(scope.$index,scope.row)">
                </el-button>
              </template>
            </el-table-column>
        </el-table>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-pagination
          background
          @current-change="currentChange"
          layout="prev,pager,next"
          :total="totalPage">
        </el-pagination>
      </el-row>
      <el-dialog
        title="修改商家信息"
        :visible.sync="dialogVisible"
        width="30%">
        <div>
          <el-form :model="merchantForm" ref="merchantForm" label-width="auto" class="demo-ruleForm merchantForm">
            <el-form-item label="商家名称" prop="merchantName">
              <el-input v-model="merchantForm.merchantName" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="商家经营人" prop="bossName">
              <el-input v-model="merchantForm.bossName" clearable  placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="商家类型" prop="merchantType">
              <el-input v-model="merchantForm.merchantType" clearable placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('merchantForm')">修改</el-button>
        </div>
      </el-dialog>
    </el-container>
</template>

<script>
  import * as Qs from "qs";
  export default {
    name: "MerchantPage",
    data(){
          return{
            merchantForm: {},
            merchantList:[],
            keywords: '',
            currentPage: 1,
            pageSize: 10,
            totalCount:0,
            totalPage:0,
            dialogVisible: false
          }
      },
    methods:{
        reviseMerchant(row) {
          this.merchantForm = JSON.parse(JSON.stringify(row));
          this.dialogVisible = true;
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let params = Qs.stringify(this.merchantForm);
              this.$http.put('/merchant/updateMerchant',params ).then((response) => {
                if (response.status === 200) {
                  if (response.data.code === 10000) {
                    this.$notify({
                      title: '修改成功',
                      type: 'success'
                    });
                    this.getMerchantList();
                    this.dialogVisible = false;
                  } else {
                    this.$notify.error({
                      title: '错误',
                      message: response.data.msg
                    });
                  }
                } else {
                  this.$notify.error({
                    title: '错误',
                    message: response.status + response.statusText
                  });
                }
              })
            }
          });
        },
        getMerchantList(){
            this.$http.get('/merchant/query',{
              params:{
                keywords:this.keywords,
                pageSize:this.pageSize,
                currentPage:this.currentPage
              }
            }).then((response)=>{
              if (response.status === 200){
                if (response.data.code === 10000){
                  this.totalCount = response.data.data.totalCount;
                  this.totalPage = response.data.data.totalPage * 10;
                  this.merchantList = response.data.data.data;
                }else{
                  this.merchantList = [];
                  this.$notify.error({
                    title:'错误',
                    message:response.data.msg,
                    duration: 1000
                  });
                }
              }else {
                this.$notify.error({
                  title:'错误',
                  message:response.status + response.statusText,
                  duration: 1000
                });
              }
            })
          },
        currentChange(pageNo){
            this.currentPage = pageNo;
            this.getMerchantList();
          },
        handleMerchant(row){
            let params = Qs.stringify(row)
            this.$http.post('merchant/state',params)
            .then((response)=>{
              if (response.status === 200){
                if (response.data.code === 10000){
                  this.$notify({
                    title:'成功',
                    message:'处理成功',
                    type:'success',
                    duration: 1000
                  });
                  this.getMerchantList();
                }else {
                  this.$notify.error({
                    title:'错误',
                    message:response.data.msg,
                    duration: 1000
                  });
                }
              }else {
                this.$notify.error({
                  title:'错误',
                  message:response.status + response.statusText,
                  duration: 1000
                });
              }
            })
          },
        handleDelete(index,row){
            this.$confirm('此操作将永久删除，是否继续？','提示',{
              confirmButtonText:'确定',
              cancelButtonText:'取消',
              type:'warning'
            }).then(()=>{
              let params = Qs.stringify({
                id:row.id
              })
              this.$http.post('/merchant/del',params)
              .then((response)=>{
                if (response.status ===200){
                  if (response.data.code ===10000){
                    this.$notify({
                      title:'成功',
                      message:response.data.data,
                      type:'success',
                      duration: 1000
                    });
                    this.getMerchantList();
                  }else {
                    this.$notify.error({
                      title:'错误',
                      message:response.data.msg,
                      duration: 1000
                    });
                  }
                }else {
                  this.$notify.error({
                    title:'错误',
                    message:response.status + response.statusText,
                    duration: 1000
                  });
                }
              })
            });
        }
      },
    created(){
      this.getMerchantList();
    }
}
</script>

<style scoped>
  .el-row{
    margin-bottom: 15px;
  }
</style>
